<?php
$lang_info = trans('view.game.data.settlement.info');
$lang_headings = trans('view.game.data.settlement.headings');
$lang_games = trans('view.game.games');
?>

<!doctype html>
<html lang="{{ str_replace('_', '-', request()->input('lang', app()->getLocale())) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $lang_games[$data['game_id']] ?? $data['game_id'] }}</title>
    <style>
        *,
        ::before,
        ::after {
            box-sizing: border-box;
        }

        html {
            -moz-tab-size: 4;
            tab-size: 4;
            line-height: 1.15;
            -webkit-text-size-adjust: 100%;
        }

        body {
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
            color: #606266;
            margin: 45px 0;
        }

        img {
            display: inline;
            vertical-align: baseline;
        }

        .base-form {
            margin-bottom: 15px;
        }

        .row {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        }

        .col {
            -ms-flex: 0 0 100%;
            flex: 0 0 100%;
            max-width: 100%;
        }

        @media (min-width: 576px) {
            .col {
                -ms-flex: 0 0 50%;
                flex: 0 0 50%;
                max-width: 50%;
            }
        }

        @media (min-width: 1200px) {
            .col {
                -ms-flex: 0 0 33.333333%;
                flex: 0 0 33.333333%;
                max-width: 33.333333%;
            }
        }

        .el-form-item {
            margin-bottom: 18px;
            display: flex;
        }

        .el-form-item__label {
            box-sizing: border-box;
            color: #909399;
            font-size: 14px;
            line-height: 32px;
            padding: 0 12px 0 0;
            text-align: right;
            vertical-align: middle;
            min-width: 120px;
        }

        .el-form-item__content {
            font-size: 14px;
            line-height: 32px;
            position: relative;
        }

        .list-space {
            background-color: #f5f8fa;
            display: block;
            height: 10px;
        }

        table {
            position: relative;
            overflow: hidden;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            width: 100%;
            max-width: 100%;
            font-size: 14px;
            color: #606266;
            border-collapse: collapse;
            table-layout: fixed;
        }

        table thead {
            color: #909399;
            font-weight: 500;
        }

        table tr {
            background-color: #fff;
        }

        table th {
            overflow: hidden;
            -ms-user-select: none;
            user-select: none;
            background-color: #FFF;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            position: relative;
            vertical-align: middle;
            padding-left: 10px;
            padding-right: 10px;
            width: 100%;
        }

        table td, table th {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            word-break: break-all;
            line-height: 23px;
            border-bottom: 1px solid #EBEEF5;
            min-width: 0;
            padding: 12px 10px;
            position: relative;
            text-align: center;
            vertical-align: middle;
        }

        table tbody.body td {
            -webkit-transition: background-color .25s ease;
            transition: background-color .25s ease
        }

        table tbody.body tr:hover > td {
            background-color: #F5F7FA
        }

        table tbody.footer td {
            background-color: #f5f7fa;
        }

        table .call {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .tag {
            tab-size: 4;
            text-indent: 0;
            border-collapse: separate;
            text-align: left;
            word-break: break-all;
            display: inline-block;
            font-size: 12px;
            border-width: 1px;
            border-style: solid;
            border-radius: 4px;
            box-sizing: border-box;
            white-space: nowrap;
            height: 20px;
            padding: 0 5px;
            line-height: 19px;
            background-color: #fff;
            border-color: #d3d4d6;
            color: #909399;
        }
    </style>
</head>
<body>
<form class="base-form">
    <div class="row">
        <div class="col">
            <div class="el-form-item">
                <label class="el-form-item__label">SN</label>
                <div class="el-form-item__content">{{ $data['sn'] }}</div>
            </div>
        </div>
        <div class="col">
            <div class="el-form-item">
                <label class="el-form-item__label">{{ $lang_info['ext']['device'] }}</label>
                <div class="el-form-item__content">{{ $data['ext']['device'] ?? '-' }}</div>
            </div>
        </div>
        <div class="col">
            <div class="el-form-item">
                <label class="el-form-item__label">ID</label>
                <div class="el-form-item__content">{{ $data['id'] }}</div>
            </div>
        </div>
        <div class="col">
            <div class="el-form-item">
                <label class="el-form-item__label">{{ $lang_headings['game_id'] }}</label>
                <div class="el-form-item__content">{{ $lang_games[$data['game_id']] ?? $data['game_id'] }}</div>
            </div>
        </div>
        <div class="col">
            <div class="el-form-item">
                <label class="el-form-item__label">UID</label>
                <div class="el-form-item__content">{{ $data['uid'] }}</div>
            </div>
        </div>
        <div class="col">
            <div class="el-form-item">
                <label class="el-form-item__label">{{ $lang_headings['account_id'] }}</label>
                <div class="el-form-item__content">{{ $data['account_id'] }}</div>
            </div>
        </div>
        <div class="col">
            <div class="el-form-item">
                <label class="el-form-item__label">{{ $lang_headings['currency'] }}</label>
                <div class="el-form-item__content">{{ $data['currency'] }}</div>
            </div>
        </div>
        <div class="col">
            <div class="el-form-item">
                <label class="el-form-item__label">{{ $lang_headings['bet_base'] }}</label>
                <div class="el-form-item__content">{{ num_format($data['bet_base']) }}</div>
            </div>
        </div>
        <div class="col">
            <div class="el-form-item">
                <label class="el-form-item__label">{{ $lang_headings['bet_num'] }}</label>
                <div class="el-form-item__content">{{ num_format($data['bet_num']) }}</div>
            </div>
        </div>
        <div class="col">
            <div class="el-form-item">
                <label class="el-form-item__label">{{ $lang_headings['gain_player'] }}</label>
                <div class="el-form-item__content">{{ num_format($data['gain_player']) }}</div>
            </div>
        </div>
        <div class="col">
            <div class="el-form-item">
                <label class="el-form-item__label">{{ $lang_headings['balance_start'] }}</label>
                <div class="el-form-item__content">{{ num_format($data['balance_start']) }}</div>
            </div>
        </div>
        <div class="col">
            <div class="el-form-item">
                <label class="el-form-item__label">{{ $lang_headings['balance_end'] }}</label>
                <div class="el-form-item__content">{{ num_format($data['balance_end']) }}</div>
            </div>
        </div>
        <div class="col">
            <div class="el-form-item">
                <label class="el-form-item__label">{{ $lang_headings['start_time'] }}</label>
                <div class="el-form-item__content">{{ timestamp_to_datetime($data['start_time'], 'second', $timezone) }}</div>
            </div>
        </div>
        <div class="col">
            <div class="el-form-item">
                <label class="el-form-item__label">{{ $lang_headings['end_time'] }}</label>
                <div class="el-form-item__content">{{ timestamp_to_datetime($data['end_time'], 'second', $timezone) }}</div>
            </div>
        </div>
    </div>
</form>
@yield('content')
</body>
</html>
